* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    /* width: 100vw; */
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(#999,#293243);
    /*background: radial-gradient(#999,#bc4641);
    background: radial-gradient(#999,#cc6c0e); */
}

body .container {
    width: 400px;
    height: 400px;
    position: relative;
    /* transform: scale(.8); */
}

.container .item {
    width: 100%;
    height: 100%;
    position: absolute;
    /* 为了能有一个起始样式,设置了left和top */
    left: 0;
    top: 0;
    transform-origin: center bottom;
    transition: all .5s;
}

.container .left {
    left: -400px;
    filter: blur(20px);
}

.container .right {
    left: 400px;
    filter: blur(20px);
}

.container .middle {
    transform: scale(1.3);
}